<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆检查</title>
    <style>
        *{
            margin: 0 auto;
        }
        table{
            border: 1px solid black;
            text-align: center;
            width: 300px;
            height: 150px;
        }
        button{
            width: 100px;
        }
        td{
            border: 1px solid black;
        }
        #prompt{
            color: red;
            font-weight:bold;
        }
    </style>
    <script src="jquery-3.6.1.js"></script>
</head>
<body>
<form action="/CheckLogin">
    <table>
        <tr>
            <td>用户名：</td>
            <td>
                <input type="text" name="username" id="in_user">
<!--                要用行内式写属性写display属性-->
                <p id="prompt" style="display: none">用户名已存在！</p>
            </td>
        </tr>
        <tr>
            <td>密码：</td> <td><input type="password" name="password"></td>
        </tr>
        <tr><td colspan="2"><button type="submit">提交</button></td></tr>
    </table>
</form>
<script>
    $('#in_user').blur(()=>{
        $.ajax({
            url:'http://localhost/CheckLoginJquery',
            data:{
                username:$('#in_user').val()
            },
            success(login){
                console.log(login)
                if(login == "false"){
                    $('#prompt').attr('style','display: ;')
                }else {
                    $('#prompt').attr('style','display: none;')
                }
            }
        })
    })
</script>
</body>
</html>